<template>
  <span class="inline-flex items-center">
    <i class="el-icon-menu Icon Icon-text" @click="visible = true"> </i>
    <el-drawer
      :visible.sync="visible"
      :modal-append-to-body="false"
      :direction="drawerDirection"
      :size="drawerSize"
    >
      <template v-slot:title>
        <div class="text-center text-purple-500 font-semibold">
          {{ menusTitle }}
        </div>
      </template>
      <!--    <NcCompMenuAccordion :menus="menus" @close="visible = false" />-->
      <NcCompMenuCard :menus="menus" @close="visible = false"></NcCompMenuCard>
    </el-drawer>
  </span>
</template>

<script>
import NcCompMenuAccordion from './NcCompMenuAccordion'
import NcCompMenuCard from './NcCompMenuCard'

export default {
  name: 'NcCompMenuDrawer',
  components: { NcCompMenuCard, NcCompMenuAccordion },
  props: {
    drawerDirection: {
      type: String,
      default: 'rtl',
    },
    drawerSize: {
      type: String,
      default: '30%',
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    nav() {
      return this.$store.state.pathTree[this.$i18n.locale]
    },
    menusTitle() {
      return this.nav['/'].title
    },
    menus() {
      return Object.keys(this.nav)
        .filter((key) => /^\/[^/]+$/.test(key))
        .map((key) => this.nav[key])
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .el-drawer {
  overflow: auto !important;

  .el-drawer__header {
    /*margin-bottom: 32px !important;*/
  }
}
</style>
